﻿<template>
  <div class="l-rblock l-form-viewer" style="padding: 8px">
    <el-form
      :model="formData"
      :rules="rules"
      size="mini"
      labelPosition="right"
      labelWidth="80px"
      ref="form"
    >
      <div class="l-auto-window only-tabs">
        <el-tabs v-model="activeName" type="card">
          <el-tab-pane
            class="l-tabs-container"
            :label="$t('主表信息')"
            name="tab0"
          >
            <el-row :gutter="0">
              <div class="l-rblock">
                <el-col :span="24">
                  <el-form-item
                    :label="$t('选择物料')"
                    style="text-align: right"
                  >
                    <el-button type="primary" @click="selectMaerial">{{
                      $t("选择物料")
                    }}</el-button>
                  </el-form-item>
                </el-col>
                <el-col
                  v-if="lr_formLookAuth('case_erp_bom_f_Number')"
                  :span="24"
                >
                  <el-form-item
                    :label="$t('物料编号')"
                    prop="case_erp_bom_f_Number"
                  >
                    <el-input
                      :disabled="true"
                      v-model="formData.case_erp_bom_f_Number"
                      :placeholder="$t('请输入')"
                    />
                  </el-form-item>
                </el-col>
                <el-col
                  v-if="lr_formLookAuth('case_erp_bom_f_Name')"
                  :span="24"
                >
                  <el-form-item
                    :label="$t('物料名称')"
                    prop="case_erp_bom_f_Name"
                  >
                    <el-input
                      :disabled="true"
                      v-model="formData.case_erp_bom_f_Name"
                      :placeholder="$t('请输入')"
                    />
                  </el-form-item>
                </el-col>
                <el-col
                  v-if="lr_formLookAuth('case_erp_bom_f_Model')"
                  :span="24"
                >
                  <el-form-item
                    :label="$t('物料规格')"
                    prop="case_erp_bom_f_Model"
                  >
                    <el-input
                      :disabled="true"
                      v-model="formData.case_erp_bom_f_Model"
                      :placeholder="$t('请输入')"
                    />
                  </el-form-item>
                </el-col>
                <el-col
                  v-if="lr_formLookAuth('case_erp_bom_f_Type')"
                  :span="24"
                >
                  <el-form-item
                    :label="$t('物料类别')"
                    prop="case_erp_bom_f_Type"
                  >
                    <l-select
                      :disabled="true"
                      :options="typeOptions"
                      v-model="formData.case_erp_bom_f_Type"
                      :placeholder="$t('请输入')"
                    />
                  </el-form-item>
                </el-col>
                <el-col
                  v-if="lr_formLookAuth('case_erp_bom_f_Unit')"
                  :span="24"
                >
                  <el-form-item :label="$t('单位')" prop="case_erp_bom_f_Unit">
                    <l-select
                      :disabled="true"
                      :options="unitOptions"
                      v-model="formData.case_erp_bom_f_Unit"
                    />
                  </el-form-item>
                </el-col>
                <el-col
                  v-if="lr_formLookAuth('case_erp_bom_f_Property')"
                  :span="24"
                >
                  <el-form-item
                    :label="$t('物料属性')"
                    prop="case_erp_bom_f_Property"
                  >
                    <l-select
                      :disabled="true"
                      :options="propertyOptions"
                      v-model="formData.case_erp_bom_f_Property"
                      :placeholder="$t('请输入')"
                    />
                  </el-form-item>
                </el-col>
                <el-col  v-if="pid != '0' && formData.case_erp_bom_f_PId != '0'"
                  :span="24">
                  <el-form-item :label="$t('数量')" prop="case_erp_bom_f_Count">
                    <el-input-number
                      controlsPosition="right"
                      size="mini"
                      v-model="formData.case_erp_bom_f_Count"
                      :min="0"
                    />
                  </el-form-item>
                </el-col>
                <el-col
                  v-if="pid == '0' || formData.case_erp_bom_f_PId == '0'"
                  :span="24"
                >
                  <el-form-item
                    :label="$t('状态')"
                    prop="case_erp_bom_f_EnabledMark"
                  >
                    <el-switch
                      :activeValue="0"
                      :inactiveValue="1"
                      v-model="formData.case_erp_bom_f_EnabledMark"
                    />
                  </el-form-item>
                </el-col>
              </div>
            </el-row>
          </el-tab-pane>
        </el-tabs>
      </div>
    </el-form>

    <!--表单-->
    <l-dialog
      :title="$t(choseFormTitle)"
      :visible.sync="choseFormVisible"
      :height="600"
      :width="800"
      :hasBtns="false"
    >
      <l-choose-material
        @rowClick="selectClick"
        :multiple="false"
        ref="choseForm"
      />
    </l-dialog>
  </div>
</template>
<script>
const api = window.$api.erpcase.bom;
export default {
  props: {
    pid: String,
    isChild: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      moduleCode: "ERP_Bom",
      activeName: "tab0",
      formData: {
        case_erp_bom_f_Number: "", // 物料编号
        case_erp_bom_f_Name: "", // 物料名称
        case_erp_bom_f_Model: "", // 物料规格
        case_erp_bom_f_Type: "", // 物料类别
        case_erp_bom_f_Unit: "", // 单位
        case_erp_bom_f_Property: "", // 物料属性
        case_erp_bom_f_MaterialId: "", // 物料ID
        case_erp_bom_f_Count: 0,
        case_erp_bom_f_EnabledMark: 0,
      },
      rules: {
        case_erp_bom_f_Number: [{ required: true, message: "请输入" }],
        case_erp_bom_f_Name: [{ required: true, message: "请输入" }],
        case_erp_bom_f_Type: [{ required: true, message: "请输入" }],
        case_erp_bom_f_Unit: [{ required: true, message: "请输入" }],
        case_erp_bom_f_Property: [{ required: true, message: "请输入" }],
        case_erp_bom_f_Count: [{ required: true, message: "请输入" }],
      },

      // 这是choseForm
      choseFormTitle: "选择物料",
      choseFormVisible: false
    };
  },
  computed: {
    unitOptions() {
      const data = this.lr_DataSource("ERP_Unit");
      return this.lr_DataSourceOptions(
        data.filter((t) => t.f_state == 0),
        "f_id",
        "f_name"
      );
    },
    typeOptions() {
      const data = this.lr_DataSource("ERP_MaterialClasses");
      return this.lr_DataSourceOptions(
        data.filter((t) => t.f_state == "0"),
        "f_id",
        "f_type"
      );
    },
    propertyOptions() {
      const data = this.lr_DataSource("ERP_MaterialProp");
      return this.lr_DataSourceOptions(
        data.filter((t) => t.f_state == "0"),
        "f_id",
        "f_type"
      );
    },
  },
  mounted() {},

  methods: {
    // 重置表单
    resetForm() {
      this.formData.case_erp_bom_f_MaterialId = "";
      this.formData.case_erp_bom_f_PId = "";
      this.$formClear(this.$refs.form);
      this.activeName = "tab0";
    },
    // 校验表单
    async validateForm() {
      if (!(await this.$formValidateWraper(this.$refs.form))) {
        return false;
      }
      return true;
    },
    // 设置表单数据
    setForm(data) {
      this.$setFormData(this.formData, data, "case_erp_bom");
    },
    // 获取表单数据
    getForm() {
      const res = this.$getFormData(this.formData, "case_erp_bom");
      if (!res.f_PId) {
        res.f_PId = this.pid;
      }
      return res;
    },

    async loadFormData({ keyValue /*,params,node*/ }) {
      //  keyValue 流程中相当于流程processId,params 传递参数,node 流程节点
      const data = await this.$awaitWraper(api.get(keyValue));
      if (data) {
        this.setForm(data);
        return true;
      } else {
        return false;
      }
    },

    async saveForm({ keyValue, isEdit /*,code,node*/ }) {
      // isEdit 是否更新数据, keyValue 流程中相当于流程processId,code 表示流程中的操作码,node 流程节点
      const postData = this.getForm();
      if (isEdit) {
        // 编辑
        return await this.$awaitWraper(api.update(keyValue, postData));
      } else {
        // 新增
        postData.f_Id = keyValue;

        return await this.$awaitWraper(api.add(postData));
      }
    },

    // 选择物料
    selectMaerial() {
      this.choseFormVisible = true;
    },
    selectClick(row) {
      this.formData.case_erp_bom_f_Number = row.f_Number;
      this.formData.case_erp_bom_f_Name = row.f_Name;
      this.formData.case_erp_bom_f_Model = row.f_Model;
      this.formData.case_erp_bom_f_Type = row.f_Type;
      this.formData.case_erp_bom_f_Unit = row.f_Unit;
      this.formData.case_erp_bom_f_Property = row.f_Property;
      this.formData.case_erp_bom_f_MaterialId = row.f_Id;

      this.choseFormVisible = false;
    },
  },
};
</script>